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A METHOD AND SYSTEM FOR GENERATING A TUTORIAL APPLICATION 

Field of the Invention 

5 The invention relates to the field of source code 

development and in particular a method and system for 
generating a tutorial application from one or more source code 
elements . 

10 Background of the Invention 

Technology is constantly changing at a rapid pace and it 
is difficult for many companies to keep up to date with the 
latest technological developments. In order for companies to 

15 compete with their competitors in the market place it is vital 

that companies keep ahead of the latest technological 
developments and provide education to their employees to 
enable the employees to develop the required skills. 

Educating employees is a time consuming and expensive 

20 task. It takes a considerable amount of time on behalf of a 

course tutor in preparing course materials and collating the 
information required. In the IT industry this is particularly 
a problem when employees need to be able to learn a new 
programming language, or how to apply a programming language 

25 to achieve a particular programming task. Every time a person 

learns a new programming language, for example, the programing 
language C which is a registered trade mark of AT&T Bell 
Laboratories, or Java which is a registered trade mark of Sun 
Microsystems Inc, each new programming language brings with it 

30 its own way of doing things; taking the example of the 

programming language C, it is important to learn how the 
pre-processor directives operate, i.e., commands that give 
instructions to the C Pre-processor whose job it is to modify 
the source code of a C program before it is compiled, or what 

35 libraries are available, the types of reserved words that can 
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be used and types of standard and user-defined identifiers, 
variable declarations and data types. 

A common approach to devising tutorials for learning 
programming skills has been to produce a tutorial document 
5 which references the relevant elements of the source code by 

line number in a text editor. The person learning the 
programming skills is then able to read the tutorial document 
in conjunction with the source code. If the student does not 
understand, for example, how a particular sort routine works, 

10 by referring to the line number of the source code the person 

can cross reference the line number to the corresponding 
numbered section in the tutorial document, which explains how 
the sort routine works. 

Another approach to devising programming tutorials can be 

15 seen in web based tutorials. The web based tutorial displays a 

section of source code, that provides a sort routine for 
example. To find out how a particular element of source code 
works a hyperlink is provided and by clicking on the hyperlink 
with a mouse pointer or other input device the required 

20 information is displayed. In some examples it is possible that 

the hyperlink launches an application that runs the compiled 
code in order to observe the result, for example, how a sort 
routine sorts elements in an array. 

All of the above examples are time consuming on behalf of 

25 the person creating the tutorial. If a web based application 

is being developed, the person developing the tutorial will 
have to have knowledge of html to create the hyperlinks and 
further programming knowledge to enable the tutorial to 
operate interactively with a student. If a more paper based 

30 approach is used, then considerable time and effort is spent 

writing the documentation and cross-referencing the written 
documentation with the line number of the source code. 

Another example is CACTUS, from the University of Madrid 
Spain, which offers an integrated environment to design 

35 tutorial courses for interactive applications. CACTUS is 

specifically for generating course documentation to teach how 
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to use a graphical user interface. The graphical user 
interface is described in detail using a purpose built 
specification language and CACTUS takes the detailed 
description and from this generates user documentation. A 
5 drawback with this approach is the time and effort it takes in 

creating an interactive application. 

Therefore an improved method and system is required for 
automatically generating a tutorial application based on 
source code written to achieve a particular task. 

10 

Summary of the Invention 



In accordance with the present invention there is now 
provided a method for generating a tutorial application linked 

15 to one or more source code elements, the method comprising the 

steps of: receiving user input indicating one or more source 
code elements to be selected and one or more data elements to 
be tagged to one or more selected source code elements; 
tagging one or more selected source code elements with one or 

20 more of the data elements; generating the tutorial application 

linked to one or more source code files from said tagged 
source code elements; and displaying the generated tutorial 
application, the tagged source code elements and the data 
elements. Not all the source code in a source code file may be 

25 relevant to the tutorial application that needs to be created. 

The user is therefore able to select just the elements of 
source code needed to teach a particular task. 

Preferably, the present invention provides for a method 
wherein the selected source code elements are tagged by a 

30 markup language. This provides an advantage for a user in 

that it is possible to very quickly build a tutorial 
application starting with one or more source code files and 
for the same, or a different, user to reload the tutorial 
source code in order to update/modify the tutorial in future. 

35 A further advantage is provided for the student using the 

tutorial application as the student is given the benefit of 
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viewing the selected tagged source code along with the 
explanation text and is able to navigate through the tutorial 
application in a step by step approach. 

Preferably the present invention provides for a user 
5 creating one or more tutorial steps.. This provides an 

advantage in that a user is able to describe and structure the 
tutorial application in a logical and hierarchical manner, as 
a tutorial can be made up of many different parts. 

Preferably the present invention provides for a method 

10 wherein support for one or more programming languages, and one 

or more execution environments, is provided. The present 
invention is not tied into one particular programming language 
but provides support for many different types. 

Preferably the present invention provides for a method 

15 wherein the data elements comprise an explanation text for the 

selected source code. 

According to another aspect of the present invention 
there is provided for a system for generating a tutorial 
application linked to one or more source code files, the 

20 system comprising: means for receiving user input indicating 

one or more source code elements to be selected and one or 
more data elements to be tagged to one or more selected source 
code elements; means for tagging one or more selected source 
code elements with one or more data elements; means for 

25 generating the tutorial application linked to one or more 

source code files from said tagged source code elements; means 
for displaying the tutorial application, the tagged source 
code elements and the data elements. 

According to another aspect of the present invention 

30 there is provided for a computer program product directly 

loadable into the internal memory of a digital computer, 
comprising software code portions for performing the method of 
the present invention when said product is run on a computer. 
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Brief Description of the Drawings 

The invention will now be described by way of example 
only, with reference to the accompanying drawings, in which: 
5 Figure 1, illustrates the tutorial generation application 

as running on a data processing system, according to a 
preferred embodiment of the present invention; 

Figure 2, illustrates the steps that the tutorial 
generation application of Figure 1, carries out, according to 
10 a preferred embodiment of the present invention; 

Figure 3, illustrates the input interface of the tutorial 
generation application of Figure 1, according to a preferred 
embodiment of the present invention; 

Figure 4, illustrates an element of source code tagged 
15 with a markup language as it would be stored in the tutorial 

generation application of Figure 1, according to a preferred 
embodiment of the present invention; and 

Figure 5, illustrates the generated tutorial application 
as used by a student according to a preferred embodiment of 
20 the present invention. 

Detailed Description of the Invention 

Figure 1, illustrates the tutorial generation application 
25 105 running on a data processing system 100. The tutorial 

generation application 105 could equally run on a server which 
is accessed by a client device across a network. The tutorial 
generation application 105 comprises a development environment 
130 which further comprises a source code editor 110 for 
30 developing or editing source code, a compiler 120 for 

translating the source code into object code, a debugger 115 
for detecting errors in the source code and a display 
interface 125 to display the generated tutorial application. 
The tutorial generation application 105 can also be provided 
35 as a x plug in' option to a preferred programming environment. 

A user can either create the source code in their preferred 
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programming environment and then invoke the plugin in order to 
launch the tutorial generation application 105 or create the 
source code in the development environment 13 0 provided by the 
tutorial generation application 105 . The tutorial generation 
5 application 105 provides support for the many different types 

of programming languages and for the different types of 
execution environments that it will be run on. These 
preferences can all be manually configured from a menu option 
within the tutorial generation application. By selecting the 

10 'file menu' and then selecting 'new' it is possible to create 

a new tutorial. The user is prompted to enter a name for the 
new tutorial for example 'Thread Management'. 

Referring to figure 2 at step 200, the tutorial 
generation application 105 receives input from a user on the 

15 source code elements to be selected and the data elements to 

be tagged to the selected source code elements at step 205. 
Steps 200 and 205 of figure 2, will now be explained further, 
by way of an example with reference to figure 3 . 

The user can select the source code 3 05 in the source 

20 code editor 300 by means of an input device such as a mouse. 

Either by right clicking with the mouse, or by selecting an 
option from the tutorial generation application's 'Create' 
menu, or by clicking a smart icon, an input window called 
'Tutorial Step' is displayed 310. 

25 For each tutorial it is possible to have many tutorial 

steps. For example in the tutorial 'Thread Management' there 
are many steps that a programmer must write when managing 
threads. Each of these individual steps must be explained to a 
student in order for the student to understand the 

30 complexities of thread management. In such a case it is 

therefore necessary to select each element or group of 
elements of source code from one or more source code files 
that are required in a particular step and tag each element or 
group of elements with the appropriate data elements. Equally, 

35 the tutorial 'Thread Management' could be part of a larger 

tutorial, for example, 'Asynchronous Beans', and as such the 
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user is able to describe and structure the tutorial in a 
logical hierarchical approach when creating the tutorial for 
the first time or by modifying an existing tutorial. 

The input window 310 provides a means in which to input 
5 the data elements which will be tagged to the source code. 

Firstly, the tutorial step is given a title 315; in this 
example the title is 'Initialise WorkManager ' . The tutorial 
step is given a sequence number 32 0, in this example the 
number given is the number 1 which dictates that this 

10 particular tutorial step is the first step in a sequence. 

Subsequent steps would be labelled 2, 3,4 and so on. Lastly, 
the data elements that are to be tagged to the selected source 
code elements are entered into the input box 325. In this 
example the data elements that comprise the explanation text 

15 that will be generated by the tutorial generation application 

105 explain how the WorkManager is initialised. When all the 
required information is input into the tutorial step window 
310, the user can select the x OK' button 330 to continue or 
equally the user can select the cancel button 335 to disregard 

20 the information input into the input boxes 315, 320 and 325 of 

the tutorial step window 310. 

Referring back to figure 2, at step 215 the data elements 
are tagged to the selected source code. The tags are provided 
by a markup language such as XML. XML is a universal format 

25 for structured documents on the world wide web. XML is a set 

of rules for designing text formats that allow metadata to be 
structured using tags (words bracketed by 1 < ' and ' > 1 ) and 
attributes (of the form name = "value") to delimit the 
metadata. Step 215 of figure 2, will now be explained further, 

30 by way of an example with reference to figure 4 which 

illustrates a selected element of source code tagged using XML 
as the markup language and tagged with the attributes of the 
input data elements as shown in figure 3 . 

Firstly, the selected source code is tagged by the 

35 tutorial generation application 105 with a tutorial step tag 

400 with attributes of the sequence number 405 in this example 
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the sequence number is "1' which was input into the tutorial 
step sequence input box 32 0 in figure 3 and the title of the 
tutorial step 410 as input into the tutorial step title input 
box 315 in figure 3. The tutorial step tag 400 flags to the 
5 tutorial generation tool 105 precisely where the selected 

tutorial step begins and where it ends 435. A code segment tag 
415 marks where the selected source code 3 05 begins and ends 
with the code segment close tag 420. Finally the explanation 
text tag 425, tags the data elements that comprise the 

10 explanation text as input into the explanation text input box 

32 0 in figure 3 and flags where the data elements finish by 
the explanation text closing tag 430. Referring back to steps 
200, 205 and 215 of figure 2, these steps are repeated until 
all the tutorial steps have been completed. 

15 Referring back to figure 2 at step 220 the tutorial 

generation application 105 generates a tutorial application 
from the tagged source code in figure 4 . The tutorial 
application is displayed at step 225 along with the selected 
source code. The display interface of step 225 of figure 1, 

20 will now be explained further, by way of an example with 

reference to Figure 5 . 

Figure 5 depicts the display interface of the tutorial 
generation application 105. The interface comprises a code 
window 510, an explanation window 530, a list of the tutorial 

25 steps 500 contained within the tutorial application, in this 

example the tutorial application 'Thread Management' and a 
results window 520. Although Figure 5 depicts a display 
interface comprising the components above, it will be 
appreciated by a person skilled in the art that numerous 

30 configurations of the above components are possible. 

The tutorial steps that were compiled in steps 2 00 and 
205 of figure 1 are displayed in a list 505, which enables a 
student to select each element within the list 500 such that 
the student can select which part of the tutorial that they 

35 would like to explore. Each time the student selects a 

tutorial step to explore from the list 505 # for example by 
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selecting 'Initialize WorkManager' 500, the selected source 
code that is titled 'Initialize WorkManager' is displayed in 
the code window 515. The tutorial application 'step 
explanation' generated from the tagged source code is 
displayed in the explanation window 530. The student is able 
to read the source code in the code window 515, whilst 
referring to the explanation window 53 0 for the explanation 
text. The tutorial is therefore self contained without the 
student needing to refer to further documentation to explain 
the fundamental concepts. 

A results window 53 5 allows the student to run the 
tutorial application by selecting the 'run example' option 
from the list 505. The tagged source code is executed within 
the results window 53 5 and the executed source code is 
displayed corresponding to the steps selected by the student 
from the list 50 5. 



